<template>
  <div class="background">
    <el-container style="height: 100vh">
      <el-aside class="el-aside"
                style="height: 100%"
                width="186px">
        <img id="image"
             src="../../assets/logo.png" />
        <el-menu active-text-color="yellow"
                 background-color="#1a1919b2"
                 router
                 style="color: darkorange; "
                 text-color="darkorange">
          <el-submenu class="aside-group"
                      index="1">
            <template slot="title"><i class="el-icon-message"
                 style="color: darkorange"></i>公共数据</template>
            <el-menu-item-group class="aside-group">
              <el-menu-item class="aside-group2"
                            index="/teacher/lab">实验室</el-menu-item>
              <el-menu-item class="aside-group"
                            index="/teacher/semester">学期</el-menu-item>
              <el-menu-item class="aside-group"
                            index="/teacher/arrange">实验排课</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu class="aside-group"
                      index="2">
            <template slot="title"><i class="el-icon-tickets"
                 style="color: darkorange"></i>申请相关</template>
            <el-menu-item-group class="aside-group">
              <el-menu-item class="aside-group2"
                            index="/teacher/teaToReq">实验课申请</el-menu-item>
              <el-menu-item class="aside-group"
                            index="/teacher/labRep">实验室报修</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container class="background2">
        <el-header class="el-header"
                   height="75.5px">
          <span>{{ user.name }}</span>
          <el-dropdown>
            <i class="el-icon-user"
               style="
                font-size:30px;
                margin-left: 10px;
                margin-right: 10px;
                color: darkorange;
              "></i>
            <el-dropdown-menu slot="dropdown"
                              :default-active="this.$router.path"
                              class="dropdown">
              <el-dropdown-item class="dropdown1"
                                @click.native="logOut()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data () {
    return {};
  },
  computed: mapState(["user", "term", "token"]),
  methods: {
    logOut () {
      this.$http.post("/user/logout", {}, { headers: { 'userId': this.token } })
      this.$router.push({ path: "/public" });
    },
  },
};
</script>

<style scoped>
#image {
  height: 70px;
  width: 185px;
}

.main {
  border-right: solid 2px darkorange;
  border-bottom: solid 2px darkorange;
  border-left: solid 2px darkorange;
}

.dropdown1 {
  color: darkorange;
  background-color: #1a1919b2;
}

.dropdown {
  color: darkorange;
  background-color: #1a1919b2;
  border: 1px solid darkorange;
}
.el-dropdown-menu {
  top: 60px !important;
}

.el-header {
  background-color: #1a1919b2;
  color: darkorange;
  line-height: 75px;
  font-size: 30px;
  text-align: right;
  border-bottom: solid 2px darkorange;
  border-right: solid 2px darkorange;
  border-top: solid 2px darkorange;
}

.el-aside {
  width: 185px;
  color: #1a1919b2;
  background-color: #1a1919b2;
  border-left: solid 2px darkorange;
  border-top: solid 2px darkorange;
  border-bottom: solid 2px darkorange;
}

.background {
  background-color: #000000b2;
}

.aside-group {
  min-width: 185px;
  max-width: 185px;
  width: 185px;
  background-color: #1a1919b2;
  color: darkorange;
  border-top: 1px solid darkorange;
}

.aside-group2 {
  margin-top: -15px;
  min-width: 185px;
  max-width: 185px;
  width: 185px;
  background-color: #1a1919b2;
  color: darkorange;
  border-top: 1px solid darkorange;
}
</style>